<template>
  <el-container class="channelSetting">
    <el-main>
      <div class="card-list">
        <el-card shadow="never" class="selectCard searchColumn">
          <el-form label-position="right" label-width="6rem">
            <el-row>
              <el-col :span="8">
                <el-form-item label="渠道名称：">
                  <el-input v-model="searchParams.name" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <SearchButton :default-params="searchParams" @refreshParams="refreshParams" @getList="getList1" />
          </el-form>
        </el-card>
        <el-card shadow="never" class="tableCard">
          <vxe-toolbar :custom="{icon: 'el-icon-s-operation'}" :refresh="{query: getList1}" print>
            <template v-slot:buttons>
              <el-button size="small" type="primary" @click="addClick">新增</el-button>
            </template>
          </vxe-toolbar>
          <vxe-table
            ref="listTree"
            border
            resizable
            highlight-hover-row
            :auto-resize="true"
            :data="list"
            width
            max-height="500"
            :print-config="{}"
            row-id="id"
            highlight-current-row
            text-algin="center"
          >
            <vxe-table-column title=" " type="seq" width="50" align="center" />
            <vxe-table-column field="name" min-width="150" title="渠道名称" />
            <vxe-table-column field="description" min-width="200" title="渠道描述" />
            <vxe-table-column field="createByName" min-width="120" title="创建人" />
            <vxe-table-column field="createTime" min-width="150" title="创建日期" />
            <vxe-table-column title="操作" fixed="right" width="130" align="center" slots="default">
              <template slot-scope="scope">
                <div>
                  <el-button size="mini" type="text" @click="lookAdd(scope.row.id)">查看</el-button>
                  <el-button size="mini" type="text" @click="goAdd(scope.row.id)">编辑</el-button>
                  <el-button size="mini" type="text" @click="goDel(scope.row.id)">删除</el-button>
                </div>
              </template>
            </vxe-table-column>
          </vxe-table>
          <vxe-pager
            :current-page.sync="searchParams.pageNum"
            :page-size.sync="searchParams.pageSize"
            :total="total"
            :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
            @page-change="getList()"
          />
        </el-card>
      </div>
      <el-dialog v-if="dialogFormVisible" :title="tagTitle" :close-on-click-modal="false" width="35%" :visible.sync="dialogFormVisible">
        <el-form ref="formParams" :model="formParams" :rules="formRules" label-width="6rem">
          <el-row>
            <el-col :span="16">
              <el-form-item label="渠道名称：" prop="name">
                <el-input v-model="formParams.name" :disabled="isDisabled" placeholder="" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="渠道描述：">
                <el-input v-model="formParams.description" :disabled="isDisabled" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button v-if="!isDisabled" type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
import SearchButton from '@/components/SearchButton'
import { getPageList, addPageList, modifyPageList, lookPageList, delPageList } from '@/api/channelSetting'

export default {
  components: {
    SearchButton
  },
  data() {
    return {
      isSave: 1,
      isDisabled: true,
      tagTitle: '新建渠道',
      dialogFormVisible: false,
      list: [],
      total: 0,
      formParams: {
        name: '',
        description: ''
      },
      formRules: {
        name: [
          { required: true, message: '请输入渠道名称', trigger: 'change' }
        ]
      },
      searchParams: {
        name: '',
        pageNum: 1,
        pageSize: 20
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    submitForm() {
      this.$refs.formParams.validate((valid) => {
        if (valid) {
          if (this.isSave === 1) {
            this.addSave()
          } else {
            this.detailsSave()
          }
        }
      })
    },
    addSave() {
      addPageList(this.formParams).then(res => {
        if (res === true) {
          this.$message.success('保存成功！')
          this.dialogFormVisible = false
          this.getList()
        }
      })
    },
    detailsSave() {
      modifyPageList(this.formParams).then(res => {
        if (res === true) {
          this.$message.success('修改成功！')
          this.dialogFormVisible = false
          this.getList()
        }
      })
    },
    refreshParams(params) {
      this.searchParams = params
      this.getList1()
    },
    getList1() {
      this.searchParams.pageNum = 1
      this.getList()
    },
    getList() {
      getPageList(this.searchParams).then(res => {
        this.list = res.records
        this.total = res.total
      })
    },
    addClick() {
      this.isSave = 1
      Object.keys(this.formParams).forEach(key => {
        this.formParams[key] = ''
      })
      this.tagTitle = '新建渠道'
      this.dialogFormVisible = true
      this.isDisabled = false
    },
    lookAdd(id) {
      this.isDisabled = true
      this.tagTitle = '查看渠道'
      this.details(id)
    },
    details(id) {
      lookPageList({ id: id }).then(res => {
        this.formParams = res
        this.dialogFormVisible = true
      })
    },
    goAdd(id) {
      this.isSave = 2
      this.isDisabled = false
      this.tagTitle = '编辑渠道'
      this.details(id)
    },
    goDel(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delPageList({ id: id }).then(res => {
          this.$message.success('删除成功!')
          this.getList()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>
<style lang="scss">
  .channelSetting{
    .card-list {
      width: 100%;
    }
  }
</style>
